<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        

        .equip .col-xs-1 {
            width: 8.8%;
            height: 100px;
            margin-right: 28px;
            padding-top: 5px;
            border-radius: 10px 10px 10px 10px;
            text-align: center;
            color: #fff;
            position: relative;
        }

        .equip .col-xs-1:nth-child(1) {
            background: #3399ff;
        }

        .equip .col-xs-1:nth-child(2) {
            background: #61a0a8;
        }

        .equip .col-xs-1:nth-child(3) {
            background: #6666ff;
        }

        .equip .col-xs-1:nth-child(4) {
            background: #00cc99;
        }

        .equip .col-xs-1:nth-child(5) {
            background: #e98f6f;
        }

        .equip .col-xs-1:nth-child(6) {
            background: #f67287;
        }

        .equip .col-xs-1:nth-child(7) {
            background: #f29e3c;
        }

        .equip .col-xs-1:nth-child(8) {
            background: #91c7ae;
        }

        .equip .col-xs-1:nth-child(9) {
            background: #7acd94;
        }

        .class_cover {
            width: 100%;
            height: 22px;
            line-height: 22px;
            font-size: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #FFFFFF;
            position: absolute;
            left: 0px;
            bottom: 0px;
            border-radius: 0px 0px 10px 10px;
        }

        .class_cover:hover {
            cursor: pointer;
        }

        strong {
            color: #009999;
        }

        /*.dataTables_wrapper form-inline > .row */
        th,
        td {
            white-space: nowrap;
        }
        h3{
            font-size: 12px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>网络监控总览</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="echarts bdr" id="echarts-pie"></div>
                            </div>
                            <div class="col-sm-6" id="echartsBar">
                                <div class="echarts" id="echarts-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>设备数量统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="equip col-sm-12">
                                <!-- 设备数量统计 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>监控信息详情</h5>
                    </div>
                    <div class="ibox-content fff">
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-tabale1"
                                        aria-expanded="true">交换和路由设备</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale2" aria-expanded="false">无线网控制器</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale3" aria-expanded="false">局域网重要端口</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale4" aria-expanded="false">广域网链路</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale5" aria-expanded="false">防火墙</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale6" aria-expanded="false">入侵检测</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale7" aria-expanded="false">防病毒</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale8" aria-expanded="false">漏扫设备</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-tabale9" aria-expanded="false">视频MCU</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-tabale1" class="tab-pane active">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables1">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>CPU</th>
                                                    <th>内存</th>
                                                    <th>电源状态</th>
                                                    <th>设备温度</th>
                                                    <th>风扇状态</th>
                                                    <th>设备重启</th>
                                                    <th>板卡状态</th>
                                                    <th>BGP Neighbor Down</th>
                                                    <th>OSPF Neighbor Down</th>
                                                    <th>SNMP的响应</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>CPU</th>
                                                    <th>内存</th>
                                                    <th>电源状态</th>
                                                    <th>设备温度</th>
                                                    <th>风扇状态</th>
                                                    <th>设备重启</th>
                                                    <th>板卡状态</th>
                                                    <th>BGP Neighbor Down</th>
                                                    <th>OSPF Neighbor Down</th>
                                                    <th>SNMP的响应</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale2" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables2">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>CPU</th>
                                                    <th>内存</th>
                                                    <th>电源状态</th>
                                                    <th>设备温度</th>
                                                    <th>风扇状态</th>
                                                    <th>连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>CPU</th>
                                                    <th>内存</th>
                                                    <th>电源状态</th>
                                                    <th>设备温度</th>
                                                    <th>风扇状态</th>
                                                    <th>连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale3" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables3">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>端口通断</th>
                                                    <th>二层出入流量</th>
                                                    <th>丢包</th>
                                                    <th>错包</th>
                                                    <th>SNMP的响应</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>端口通断</th>
                                                    <th>二层出入流量</th>
                                                    <th>丢包</th>
                                                    <th>错包</th>
                                                    <th>SNMP的响应</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale4" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables4">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>链路通断</th>
                                                    <th>延时</th>
                                                    <th>抖包</th>
                                                    <th>丢包</th>
                                                    <th>VPN通断状态</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>链路通断</th>
                                                    <th>延时</th>
                                                    <th>抖包</th>
                                                    <th>丢包</th>
                                                    <th>VPN通断状态</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale5" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables5">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale6" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables6">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale7" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables7">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale8" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables8">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>设备连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div id="tab-tabale9" class="tab-pane">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables9">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>视频MCU状态</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>告警级别</th>
                                                    <th>设备名称</th>
                                                    <th>管理IP</th>
                                                    <th>设备位置</th>
                                                    <th>视频MCU状态</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <script src="../../js/plugins/echarts/echarts.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <!-- 模板 -->
    <script id="tpl" type="text/x-handlebars-template">

        {{#each equipInfo}}
        <div class="col-xs-1">
            <h1>{{num}}</h1>
            <h3>{{name}}</h3>
            <span class="class_cover">详细信息</span>
        </div>
        {{/each}}

    </script>
    <!-- 模板 -->
    <script type="text/javascript">
        $(function () {

            // Handlebars模板引擎数据
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板

            // 设备数量统计
            $.ajax({
                // url: 'http://192.168.0.82:8888/netMit/all',
                url: 'json/ctrl_net/设备数量统计.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var equipContext = { "equipInfo": response };
                    var equipHtml = template(equipContext);
                    $(".equip").html(equipHtml);
                }
            });

            // 饼状图
            var pieChart = echarts.init(document.getElementById("echarts-pie"));
            var pieoption;
            $.ajax({
                // url: 'http://192.168.0.82:8888/netMit/area',
                url: 'json/ctrl_net/pie.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    pieFun(response.titletext, response.legendData, response.seriesData)
                    pieChart.setOption(pieoption);
                    $(window).resize(pieChart.resize);
                }
            });
            function pieFun(titletext, legendData, seriesData) {
                pieoption = {
                    title: {
                        text: titletext,
                        textStyle: {
                            fontSize: 20,
                        },
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 0,
                        top: '20%',
                        data: legendData
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };

            // 柱状图
            var barOption;
            var barChart = echarts.init(document.getElementById("echarts-bar"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/netMit/noSolved',
                url: 'json/ctrl_net/bar.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsBar(response.titleText, response.xAxisData, response.seriesData);
                    barChart.setOption(barOption);
                    $(window).resize(barChart.resize);
                }
            });
            function echartsBar(titleText, xAxisData, seriesData) {
                barOption = {
                    title: {
                        text: '未恢复告警统计',
                        textStyle: {
                            fontSize: 20
                        },
                        subtext: '告警总数：' + titleText,
                        subtextStyle: {
                            color: '#36a9ce',
                            fontWeight: 'bold',
                            fontSize: 18,
                        },
                        itemGap: 15,    // 主副标题的间隙
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000', // X轴及其文字颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 16,
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#000', // X轴及其文字颜色
                            }
                        }
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: seriesData,
                        label: { // 图形上的文本标签
                            show: true,
                            position: 'top', // 相对位置
                            color: 'black'
                        },
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };

            // 柱状图弹窗
            $("#echartsBar").click(function () {
                alert("我是弹窗")
            });

            // 表格：交换和路由设备
            $('.dataTables1').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/router',
                "ajax": 'json/ctrl_net/交换和路由设备.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "cpu" },
                    { "data": "memory" },
                    { "data": "power" },
                    { "data": "equipC" },
                    { "data": "fan" },
                    { "data": "restart" },
                    { "data": "board" },
                    { "data": "bgp" },
                    { "data": "ospf" },
                    { "data": "snmp" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables1").wrapAll("<div style='overflow-x:auto'>");

            // 表格：无线网控制器
            $('.dataTables2').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/wireless',
                "ajax": 'json/ctrl_net/无线网控制器.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "cpu" },
                    { "data": "memory" },
                    { "data": "power" },
                    { "data": "equipC" },
                    { "data": "fan" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables2").wrapAll("<div style='overflow-x:auto'>");

            // 表格：局域网重要端口
            $('.dataTables3').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/lanPort',
                "ajax": 'json/ctrl_net/局域网重要端口.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "second" },
                    { "data": "loss" },
                    { "data": "wrong" },
                    { "data": "snmp" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables3").wrapAll("<div style='overflow-x:auto'>");

            // 表格：广域网链路
            $('.dataTables4').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/wanLink',
                "ajax": 'json/ctrl_net/广域网链路.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "delay" },
                    { "data": "shake" },
                    { "data": "loss" },
                    { "data": "vpn" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables4").wrapAll("<div style='overflow-x:auto'>");

            // 表格：防火墙
            $('.dataTables5').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/info?name=防火墙',
                "ajax": 'json/ctrl_net/防火墙.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables5").wrapAll("<div style='overflow-x:auto'>");

            // 表格：入侵检测
            $('.dataTables6').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/info?name=入侵检测',
                "ajax": 'json/ctrl_net/入侵检测.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables6").wrapAll("<div style='overflow-x:auto'>");

            // 表格：防病毒
            $('.dataTables7').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/info?name=防病毒',
                "ajax": 'json/ctrl_net/防病毒.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables7").wrapAll("<div style='overflow-x:auto'>");

            // 表格：漏扫设备
            $('.dataTables8').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/info?name=漏扫设备',
                "ajax": 'json/ctrl_net/漏扫设备.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables8").wrapAll("<div style='overflow-x:auto'>");

            // 表格：视频MCU
            $('.dataTables9').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/netMit/video',
                "ajax": 'json/ctrl_net/视频MCU.json',
                "columns": [
                    { "data": "id" },
                    { "data": "rank" },
                    { "data": "equipName" },
                    { "data": "ip" },
                    { "data": "place" },
                    { "data": "mcu" },
                    { "data": "person" },
                    { "data": "telephone" },
                ]
            });
            $(".dataTables9").wrapAll("<div style='overflow-x:auto'>");


            setTimeout(function () {
                $(".dataTables_wrapper .row .col-sm-3").addClass('col-sm-6').removeClass('col-sm-3')
            }, 50);




        })
    </script>
</body>

</html>